<!DOCTYPE html>
<html>
    <head>
        <title>WebGL Demo - Multiple Contexts and glClear(Color)</title>
        <style>
            .border {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <h1>WebGL Demo - Multiple Contexts and glClear(Color)</h1>
        <canvas id="webgl-canvas1" class="border"></canvas>
        <canvas id="webgl-canvas2" class="border"></canvas>

        <script>
            "use strict";
            const canvas1 = document.getElementById("webgl-canvas1");
            const webglContext1 = canvas1.getContext("webgl");
            const canvas2 = document.getElementById("webgl-canvas2");
            const webglContext2 = canvas2.getContext("webgl");

            function clearWithRandomColor() {
                webglContext1.clearColor(Math.random(), Math.random(), Math.random(), Math.random());
                webglContext1.clear(webglContext1.COLOR_BUFFER_BIT);
                webglContext2.clearColor(Math.random(), Math.random(), Math.random(), Math.random());
                webglContext2.clear(webglContext2.COLOR_BUFFER_BIT);
            }

            clearWithRandomColor();
            setInterval(clearWithRandomColor, 1000);
        </script>
    </body>
</html>
